<template>
  <div class="screen">
    <div id="container" ref="containerRef" class="container" @click="mouseMap"></div>
    <div class="content">
      <el-button @click="mouseToolFun">绘制范围</el-button>
      <el-button @click="removeMouseToolFun">删除范围</el-button>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: "demoMap",
  data() {
    return {
      /* AMap:null,
      map:null, // 地图实例
      mouseTool:null,//绘制 图层
      mouseToolBox:null,// 绘制对象 */
    };
  },
  methods: {
      //加载高德地图
      addMapCase(){
          AMapLoader.load({
              "key": "aa710f496404ee0f3af9f770b8592c73",              // 申请好的Web端开发者Key，首次调用 load 时必填
              "version": "1.4.15",//this.mapConfig.version,   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15 "2.0"
          }).then((AMap)=>{
              this.AMap = AMap;
              console.log(this.AMap === global.AMap, 'this 值得是谁 是谁 啊啊啊啊啊啊~');
              this.map = new this.AMap.Map('container',{  //设置地图容器id
                  viewMode:"3D",    //是否为3D地图模式
                  zoom:5,           //初始化地图级别 5
                  center:[109.699734,31.809243]
              });
              this.map.on("complete", ()=>{
                this.AMap.plugin(["AMap.MouseTool"], ()=>{ //添加绘制 实例化
                  this.mouseTool = new this.AMap.MouseTool(this.map);
                });
              });
          }).catch(e => {
              console.log('地图加载 catch', e);
          })
      },
      //绘制范围
      mouseToolFun(){
        console.log(this, 'this 值得是谁 是谁 啊啊啊啊啊啊~');
        this.map.setDefaultCursor('crosshair'); // 十字鼠标
        this.mouseTool.polygon({ strokeColor: '#F56C6C' });
        this.mouseTool.on('draw', event=> { //绘制完毕触发事件
          this.mouseToolBox = event.obj; // event.obj, '为绘制出来的覆盖物对象'
          this.mouseToolFunOKK();
        });
        //结束
        this.mouseTool.on('end', (e) => {
          console.log(e, '结束事件');
        });
      },
      //绘制完毕触发
      mouseToolFunOKK(){
        this.mouseTool.close() // 结束编辑 close()
        this.mouseToolBox.setOptions({ strokeColor: '#67C23A'});
        this.map.setDefaultCursor(''); // 手掌 鼠标样式
      },
      //删除范围
      removeMouseToolFun(){
        this.mouseTool.close(true)//关闭编辑，并清除覆盖物
        this.mouseToolBox = null;
        this.map.clearMap();
      },
  },
  created() {
    this.addMapCase();
    console.log(this.markerData, "子组件加载 坐标数据======>");

  },
};
</script>

<style lang='scss' scoped>
.screen{
  width: 100%;
  height: 100%;
  background: #666;
  .container{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .content{
    position: fixed;
    bottom: 0;
    left: 50%;
  }
}
</style>

<style lang='scss'>
.map_ico{
position: absolute;
top:0;
left: 0;
width: 1px;
height: 1px;
.dian{
  width:8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: 0;
  margin-left: -4px;
  margin-top: -4px;
  background: linear-gradient(to bottom right, rgba(0, 255, 48, 1), rgb(0, 185, 34));
  border-radius: 50%;
  box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .5);
  border:solid 1px #ffffff;
}
.mapIco_ico{
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: -1px;
  margin-top: -1px;
  width:0px;
  height: 0px;
  border-radius: 50%;
  border:solid 2px rgba(0, 255, 48, 1);
  box-shadow: 0px 0px 5px 1px rgba(0, 255, 48, .7) inset;
  opacity: 0;
  animation-name:mapIco_flash;
  animation-duration:5s; /* 规定动画完成一个周期所花费的秒或毫秒 */
  animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
  animation-delay:0s; /* 规定动画何时开始。默认是 0 */
  animation-iteration-count:infinite; /* 规定动画被播放的次数。默认是 1 */
  animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
  /* animation-direction:alternate; */ /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
}
@keyframes mapIco_flash
{
  $w:60px;
  0%  {width:2px;height: 2px;top: 1px;left: 1px;opacity: 1;}
  20%  {width:$w;height: $w;top:0-$w/2;left:0-$w/2;opacity: 0;}
  100%  {opacity: 0;}
}
.mapIco_icoBox{
  position: absolute;
  top: 0;left: 0;width: 0;height: 0;
  margin-left: -1px;
  margin-top: -1px;
  background: 
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) left top,
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) left top,
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) right top,
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) right top,
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) left bottom,
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) left bottom,
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) right bottom,
  linear-gradient(rgba(0, 255, 48) 0%, rgba(0, 255, 48) 100%) right bottom; 
  background-repeat: no-repeat;
  background-size: 1px 24px, 24px 1px;
  animation-name:mapIco_icoBox_flash;
  animation-duration:3s; /* 规定动画完成一个周期所花费的秒或毫秒 */
  animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
  animation-delay:0s; /* 规定动画何时开始。默认是 0 */
  /* animation-iteration-count:infinite; */ /* 规定动画被播放的次数。默认是 1 */
  animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
  /* animation-direction:alternate; */ /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
}
@keyframes mapIco_icoBox_flash
{
  0%  {top: -300px;left: -300px;width: 600px;height: 600px;opacity: 0;box-shadow: 0px 0px 10px 1px rgba(0, 255, 48, .7) inset;}
  10%  {top: -150px;left: -150px;width: 300px;height: 300px;opacity: 1;box-shadow: 0px 0px 10px 1px rgba(0, 255, 48, .3) inset;}
  30%  {top: 0;left: 0;width: 0;height: 0;opacity: 1;box-shadow: 0px 0px 0px 1px rgba(0, 255, 48, 0) inset;}
  100%  {top: 0;left: 0;width: 0;height: 0;opacity: 1;box-shadow: 0px 0px 0px 1px rgba(0, 255, 48, 0) inset;}
}

.dian_red{
  width:8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: 0;
  margin-left: -4px;
  margin-top: -4px;
  background: rgba(255, 0, 0, 1);
  border-radius: 50%;
  box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .5);
  border:solid 1px #ffffff;
}
.mapIco_ico1{
    position: absolute;
    top: 0px;
    left: 0px;
    width:0;
    height: 0;
    margin-left: -1px;
    margin-top: -1px;
    border-radius: 50%;
    border:solid 2px rgb(255, 0, 0);
    box-shadow: 0px 0px 300px 2px rgba(255, 0, 0, 1) inset;
    animation-name:mapIco_flash;
    animation-duration:0.5s; /* 规定动画完成一个周期所花费的秒或毫秒 */
    animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
    animation-delay:0s; /* 规定动画何时开始。默认是 0 */
    animation-iteration-count:infinite; /* 规定动画被播放的次数。默认是 1 */
    animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
    animation-direction:alternate; /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
}
@keyframes mapIco1_flash
{
  0%  {width:0px;height: 0px;top: 0px;left: 0px;}
  100%  {width:600px;height: 600px;top: -300px;left: -300px;opacity: 0;}
}
.mapIco_icoBox1{
    position: absolute;
    top: 0;left: 0;width: 0;height: 0;
    margin-left: -1px;
    margin-top: -1px;
    background: 
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) left top,
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) left top,
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) right top,
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) right top,
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) left bottom,
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) left bottom,
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) right bottom,
        linear-gradient(rgba(252, 31, 31) 0%,rgba(252, 31, 31) 100%,) right bottom;
    background-repeat: no-repeat;
    background-size: 2px 24px, 24px 2px;
    animation-name:mapIco_icoBox1_flash;
    animation-duration:1s; /* 规定动画完成一个周期所花费的秒或毫秒 */
    animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
    animation-delay:0s; /* 规定动画何时开始。默认是 0 */
    animation-iteration-count:infinite; /* 规定动画被播放的次数。默认是 1 */
    animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
    /* animation-direction:alternate; */ /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
}
@keyframes mapIco_icoBox1_flash
{
  0%  {top: -250px;left: -250px;width: 500px;height: 500px;opacity: 0;box-shadow: 0px 0px 10px 1px rgba(252, 31, 31, .7) inset;}
  100%  {top: 0;left: 0;width: 0;height: 0;opacity: 1;box-shadow: 0px 0px 0px 1px rgba(252, 31, 31, 0) inset;}
}

}

.amap-info-window{
width: 150px;
background: #fff;
border-radius: 3px;
padding: 3px 7px;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
position: relative;
}
.amap-info-sharp{
position: absolute;
top: 21px;
bottom: 0;
left: 50%;
margin-left: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
}
</style>